<template>
  <!-- 派工单表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="70%"
    draggable
    @close="closeDialog"
    :append-to-body="true"
  >
    <el-form ref="formRef">
      <el-divider content-position="left" style="margin-top: 0"
        ><span style="font-weight: bold; font-size: 16px"
          >主料化验数据</span
        ></el-divider
      >
      <el-card shadow="never" class="table-container" style="height: 270px">
        <div class="formTable">
          <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="formData.ingredients"
            highlight-current-row
            :key="Math.random"
            :show-overflow-tooltip="false"
            max-height="250px"
            border
          >
            <el-table-column
              label="材料"
              prop="materialName"
              min-width="100"
              show-overflow-tooltip
              sortable
            />

            <el-table-column
              v-for="(item, index) in dictionaryStore.filterDictList('Element')"
              :label="item.label + '%'"
              min-width="100"
              align="center"
            >
              <template #default="scope">
                {{ scope.row.sysDictionaryItemList[index].remarks || "0" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <el-divider content-position="left"
        ><span style="font-weight: bold; font-size: 16px"
          >回炉料化验数据</span
        ></el-divider
      >
      <el-card shadow="never" class="table-container" style="height: 350px">
        <div class="formTable">
          <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="formData.assay"
            highlight-current-row
            :key="Math.random"
            :show-overflow-tooltip="false"
            max-height="320px"
            border
          >
            <el-table-column
              label="材料"
              prop="materialName"
              min-width="100"
              show-overflow-tooltip
              sortable
            />

            <el-table-column
              v-for="(item, index) in dictionaryStore.filterDictList('Element')"
              :label="item.label + '%'"
              min-width="100"
              align="center"
            >
              <template #default="scope">
                {{ scope.row.sysDictionaryItemList[index].remarks || "0" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-divider content-position="left"
        ><span style="font-weight: bold; font-size: 16px"
          >辅料吸收率</span
        ></el-divider
      >
      <el-card shadow="never" class="table-container" style="height: 110px">
        <div class="formTable">
          <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="formData.assistant"
            highlight-current-row
            :key="Math.random"
            :show-overflow-tooltip="false"
            max-height="90px"
            v-if="formData.assistant.length > 0"
            border
          >
            <el-table-column
              label="材料"
              min-width="100"
              show-overflow-tooltip
              sortable
            >
              吸收率
            </el-table-column>
            <el-table-column
              v-for="(item, index) in formData.assistant[0]
                .sysDictionaryItemList"
              :label="item.itemLabel"
              min-width="100"
              align="center"
            >
              <template #default="scope">
                {{ scope.row.sysDictionaryItemList[index].remarks || "0" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MATERIALANALYSISSHOW",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

const rules = reactive({});

const formRef = ref(ElForm);

let formData = reactive({
  ingredients: [],
  assay: [],
  assistant: [],
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        workingFormCode,
        organizationId,
        organizationCode,
        plantId,
        plantCode,
        workCenterId,
        workCenterCode,
        workCenterName,
        producePlanId,
        producePlanCode,
        workOrderId,
        workOrderCode,
        workingFormType,
        processId,
        prevProcessId,
        nextProcessId,
        workSequence,
        materialId,
        materialCode,
        materialName,
        planQuantity,
        planBatch,
        planFinishQuantity,
        validQuantity,
        invalidQuantity,
        quantityUnit,
        workOrderPlanId,
        shiftSystemId,
        shiftId,
        planDate,
        isClosed,
        externalCode,
        isPause,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
      } = newVal;
      Object.assign(formData, {
        id,
        workingFormCode,
        organizationId,
        organizationCode,
        plantId,
        plantCode,
        workCenterId,
        workCenterCode,
        workCenterName,
        producePlanId,
        producePlanCode,
        workOrderId,
        workOrderCode,
        workingFormType,
        processId,
        prevProcessId,
        nextProcessId,
        workSequence,
        materialId,
        materialCode,
        materialName,
        planQuantity,
        planBatch,
        planFinishQuantity,
        validQuantity,
        invalidQuantity,
        quantityUnit,
        workOrderPlanId,
        shiftSystemId,
        shiftId,
        planDate,
        isClosed,
        externalCode,
        isPause,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
      });
      //if (formData.materialId) {
      getIngredients(formData.materialId);
      getAssay(formData.materialId);
      getAssistant(formData.materialId);
      //}
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  // formRef.value.resetFields();
  // formRef.value.clearValidate();
  formData.id = "";
  formData.workingFormCode = "";
  formData.organizationId = "";
  formData.organizationCode = "";
  formData.plantId = "";
  formData.plantCode = "";
  formData.workCenterId = "";
  formData.workCenterCode = "";
  formData.workCenterName = "";
  formData.producePlanId = "";
  formData.producePlanCode = "";
  formData.workOrderId = "";
  formData.workOrderCode = "";
  formData.workingFormType = "";
  formData.processId = "";
  formData.prevProcessId = "";
  formData.nextProcessId = "";
  formData.workSequence = "";
  formData.materialId = "";
  formData.materialCode = "";
  formData.materialName = "";
  formData.planQuantity = "";
  formData.planBatch = "";
  formData.planFinishQuantity = "";
  formData.validQuantity = "";
  formData.invalidQuantity = "";
  formData.quantityUnit = "";
  formData.workOrderPlanId = "";
  formData.shiftSystemId = "";
  formData.shiftId = "";
  formData.planDate = "";
  formData.isClosed = "";
  formData.externalCode = "";
  formData.isPause = "";
  formData.version = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.ingredients = [];
  formData.assay = [];
  formData.assistant = [];
}
const loading = ref(false);

async function getIngredients(id: any) {
  const data = await request({
    url: `/mes/smtmaterialassaydata/getIngredientsList`,
    method: "post",
    data: { materialType: "1" },
  }).finally(() => {
    loading.value = false;
  });

  formData.ingredients = data.data;
}

async function getAssay(id: any) {
  const data = await request({
    url: `/mes/smtmaterialassaydata/getIngredientsList`,
    method: "post",
    data: { materialType: "2" },
  }).finally(() => {
    loading.value = false;
  });
  formData.assay = data.data;
}

async function getAssistant(id: any) {
  const data = await request({
    url: `/mdm/mdmmaterial/queryByAuxiliary`,
    method: "post",
    data: {},
  }).finally(() => {
    loading.value = false;
  });
  formData.assistant = data.data;
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
<style lang="scss" scoped>
.editor-container {
  padding: 18px 0 0 20px;
  margin-bottom: 10px;
  background-color: var(--el-bg-color-overlay);
  // border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  // box-shadow: var(--el-box-shadow-light);
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);

  .el-form-item--default .el-form-item__label {
    justify-content: end !important;
    padding: 0 20px 0 0 !important;
  }
  .el-range-editor.el-input__wrapper {
    width: 496px !important;
  }
}

.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0;
}
</style>
